<template>
  <view class="page phone-page">
    <view class="header">
      <text class="title">MBTI性格测试</text>
      <text class="subtitle">探索真实的自己，发现无限可能</text>
    </view>
    
    <!-- 题目选择区域 -->
    <view class="version-selector" style="padding: 0rpx !important;">
      <!-- <view class="selector-title">选择测试版本</view> -->
      <view class="version-options">
        <view 
          class="version-item" 
          :class="{ selected: selectedVersion === 'standard' }"
          @click="selectVersion('standard')"
        >
          <text class="version-icon">📚</text>
          <view class="version-info">
            <text class="version-name">标准版</text>
            <text class="version-desc">48题 · 快速测试</text>
          </view>
        </view>
        
        <view 
          class="version-item" 
          :class="{ selected: selectedVersion === 'professional' }"
          @click="selectVersion('professional')"
        >
          <text class="version-icon">🎯</text>
          <view class="version-info">
            <text class="version-name">专业版</text>
            <text class="version-desc">96题 · 详细分析</text>
          </view>
        </view>
        
        <view 
          class="version-item" 
          :class="{ selected: selectedVersion === 'complete' }"
          @click="selectVersion('complete')"
        >
          <text class="version-icon">🏆</text>
          <view class="version-info">
            <text class="version-name">完整版</text>
            <text class="version-desc">200题 · 全面评估</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="input-container">
      <!-- 微信获取手机号按钮 - 未登录时显示 -->
      <!-- <button 
        v-if="!hasToken"
        class="wechat-login-btn" 
        open-type="getPhoneNumber" 
        @getphonenumber="getPhoneNumber"
      >
        <text class="wechat-text">一键登录</text>
      </button> -->
      
      <!-- 开始测试按钮 - 已登录时显示 -->
      <button 
      
        class="start-btn" 
        @click="startTest"
      >
        开始探索
      </button>
    </view>

    <!-- 探索区域 -->
    <view class="features">
      <view class="feature-item">
        <text class="icon">📊</text>
        <text class="feature-text">专业心理学测试</text>
      </view>
      <view class="feature-item">
        <text class="icon">🔒</text>
        <text class="feature-text">信息安全保障</text>
      </view>
      <view class="feature-item">
        <text class="icon">📈</text>
        <text class="feature-text">个性化发展建议</text>
      </view>
    </view>

    <!-- 我的报告入口 -->
    <view class="order-entry">
      <button class="order-btn" @click="goToOrders">
        <text class="order-icon">📋</text>
        <text class="order-text">我的报告</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PhonePage',
  props: {
    selectedVersion: {
      type: String,
      default: 'standard'
    },
    hasToken: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    selectVersion(version) {
      this.$emit('select-version', version);
    },
    getPhoneNumber(e) {
      this.$emit('get-phone-number', e);
    },
    startTest() {
      console.log('开始测试');
      this.$emit('start-test');
    },
    goToOrders() {
      // 通过事件向父组件传递信息，改变currentPage字段
      this.$emit('change-page', 'order');
      console.log('跳转到订单页面');
    }
  }
}
</script>

<style scoped>
/* 手机号页面样式 */
.phone-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 200rpx;
  padding-bottom: 100rpx;
  position: relative;
  overflow: hidden;
}

.phone-page::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 20rpx 20rpx;
  animation: float 20s linear infinite;
}

@keyframes float {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-50rpx, -50rpx) rotate(360deg); }
}

.phone-page::after {
  content: '';
  position: absolute;
  width: 300rpx;
  height: 300rpx;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  border-radius: 50%;
  top: 10%;
  right: -100rpx;
  animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.2); opacity: 0.8; }
}

.header {
  text-align: center;
  margin-bottom: 80rpx;
  color: white;
  z-index: 100;
  padding: 0 20rpx 20rpx;
}

.title {
  font-size: 64rpx;
  font-weight: bold;
  color: white;
  display: block;
  margin-bottom: 20rpx;
  text-shadow: 0 4rpx 8rpx rgba(0,0,0,0.3);
}

.subtitle {
  font-size: 36rpx;
  color: rgba(255,255,255,0.9);
  display: block;
  margin-bottom: 40rpx;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.5);
}

/* 题目选择区域样式 */
.version-selector {
  width: 100%;
  height: 160px;
  margin-bottom: 60rpx;
  position: relative;
  z-index: 2;
}

.selector-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 30rpx;
}

.version-options {
  display: flex;
  flex-direction: row;
  gap: 15rpx;
  justify-content: space-between;
  height: 100%;
}

.version-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255);
  backdrop-filter: blur(10rpx);
  border: 2rpx solid #edf2ff;
  border-radius: 20rpx;
  padding: 20rpx 15rpx;
  transition: all 0.3s ease;
  cursor: pointer;
  flex: 1;
  text-align: center;
  height: 100%;
}

.version-item:hover {
  background: rgba(255,255,255,0.15);
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 25rpx rgba(0,0,0,0.2);
}

.version-item.selected {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 8rpx 25rpx rgba(0,0,0,0.3);
}

.version-icon {
  font-size: 36rpx;
  margin-bottom: 10rpx;
  text-align: center;
}

.version-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.version-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 6rpx;
  text-align: center;
}

.version-desc {
  font-size: 22rpx;
  color: #666;
  text-align: center;
}

.input-container {
  width: 100%;
  max-width: 600rpx;
  margin-top: 80px;
  margin-bottom: 60rpx;
  position: relative;
  z-index: 2;
}

.input-wrapper {
  display: flex;
  align-items: center;
  height: 90rpx;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.15);
  border: 1rpx solid rgba(255,255,255,0.2);
  transition: all 0.3s ease;
}

.input-wrapper:focus-within {
  transform: translateY(-2rpx);
  box-shadow: 0 12rpx 40rpx rgba(0,0,0,0.2);
}

.prefix {
  font-size: 32rpx;
  color: #333;
  margin-right: 20rpx;
  border-right: 2rpx solid #eee;
  padding-right: 20rpx;
}

.phone-input {
  flex: 1;
  height: 100%;
  font-size: 32rpx;
  color: #333;
  background: transparent;
}

.agreement {
  font-size: 24rpx;
  color: #333;
  text-align: center;
  margin-bottom: 20rpx;
}

.link {
  color: #ffd700;
  text-decoration: underline;
}

.start-btn {
  width: 100%;
  max-width: 600rpx;
  height: 90rpx;
  background: linear-gradient(45deg, #ff6b6b 0%, #ff8e8e 50%, #ffa8a8 100%);
  color: white;
  border-radius: 20rpx;
  font-size: 36rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 60rpx;
  box-shadow: 0 8rpx 32rpx rgba(255,107,107,0.4);
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.start-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}

.start-btn:hover::before {
  left: 100%;
}

.start-btn:active {
  transform: scale(0.98);
}

.start-btn[disabled] {
  background: #cccccc;
  box-shadow: none;
  transform: none;
}

.start-btn[disabled]::before {
  display: none;
}

.features {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 600rpx;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333;
}

.icon {
  font-size: 40rpx;
  margin-bottom: 10rpx;
}

.feature-text {
  font-size: 24rpx;
  text-align: center;
}

/* 微信登录按钮样式 */
.wechat-login-btn {
  width: 100%;
  max-width: 600rpx;
  height: 90rpx;
  background: linear-gradient(45deg, #07c160 0%, #00d068 50%, #00e070 100%);
  color: white;
  border-radius: 20rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(7, 193, 96, 0.4);
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.wechat-login-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.wechat-login-btn:active::before {
  left: 100%;
}

.wechat-login-btn:active {
  transform: scale(0.98);
}

.wechat-icon {
  font-size: 36rpx;
  margin-right: 15rpx;
}

.wechat-text {
  font-weight: 500;
}

.divider {
  display: flex;
  align-items: center;
  margin: 30rpx 0;
  position: relative;
  z-index: 2;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 2rpx;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.divider-text {
  font-size: 28rpx;
  color: #333;
  padding: 0 20rpx;
  position: relative;
}

/* 切换按钮样式 */
.toggle-btn {
  width: 100%;
  max-width: 600rpx;
  height: 80rpx;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10rpx);
  color: #333;
  border: 2rpx solid rgba(255,255,255,0.3);
  border-radius: 20rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.toggle-btn:active {
  transform: scale(0.98);
  background: rgba(255,255,255,0.2);
}

.features {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 600rpx;
  position: relative;
  z-index: 2;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333;
  animation: fadeInUp 1s ease-out backwards;
}

.feature-item:nth-child(1) { animation-delay: 0.2s; }
.feature-item:nth-child(2) { animation-delay: 0.4s; }
.feature-item:nth-child(3) { animation-delay: 0.6s; }

.icon {
  font-size: 40rpx;
  margin-bottom: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 80rpx;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10rpx);
  border-radius: 50%;
  border: 1rpx solid rgba(255,255,255,0.2);
}

.feature-text {
  font-size: 24rpx;
  text-align: center;
  opacity: 0.9;
}

/* 订单入口样式 */
.order-entry {
  margin-top: 30rpx;
  width: 100%;
  max-width: 600rpx;
  position: relative;
  z-index: 2;
}

.order-btn {
  width: 100%;
  height: 80rpx;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10rpx);
  color: #333;
  /* border: 2rpx solid rgba(255,255,255,0.3); */
  /* border-radius: 20rpx; */
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
}

.order-btn:active {
  transform: scale(0.98);
  background: rgba(255,255,255,0.25);
}

.order-icon {
  font-size: 36rpx;
  margin-right: 15rpx;
}

.order-text {
  font-weight: 500;
}
</style>